import React, { useState ,useEffect} from 'react';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { message, Upload } from 'antd';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { connect } from 'react-redux'
import { Col, Row } from 'antd';
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'

const getBase64 = (img: RcFile, callback: (url: string) => void) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
};

const beforeUpload = (file: RcFile) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};

export const dongtai = (props:any) => {

  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState<string>();

  const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj as RcFile, (url) => {
        setLoading(false);
        setImageUrl(url);
      });
    }
  };

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );


   // editor 实例
   const [editor, setEditor] = useState<IDomEditor | null>(null)   // TS 语法
   // const [editor, setEditor] = useState(null)                   // JS 语法

   // 编辑器内容
   const [html, setHtml] = useState('<p>hello</p>')

   // 模拟 ajax 请求，异步设置 html
   useEffect(() => {
       setTimeout(() => {
           setHtml('<p>hello world</p>')
       }, 1500)
   }, [])

   // 工具栏配置
   const toolbarConfig: Partial<IToolbarConfig> = { }  // TS 语法
   // const toolbarConfig = { }                        // JS 语法

   // 编辑器配置
   const editorConfig: Partial<IEditorConfig> = {    // TS 语法
   // const editorConfig = {                         // JS 语法
       placeholder: '请输入内容...',
   }

   // 及时销毁 editor ，重要！
   useEffect(() => {
       return () => {
           if (editor == null) return
           editor.destroy()
           setEditor(null)
       }
   }, [editor])
  return (
    <div>
      {/* 所属楼盘 */}
      <Row style={{marginBottom:'20px'}}>
      <Col span={24}>所属楼盘<span style={{color:"#666",marginLeft:'10px'}}>五月花广场</span></Col>
    </Row>
    {/* 所属分类*/}
    <Row style={{marginBottom:'20px'}}>
      <Col span={24}>所属楼盘
      <select name="" id="" style={{marginLeft:'10px'}}>
        <option value="">请选择</option>
        <option value="">购房宝典</option>
        <option value="">房产百科</option>
        <option value="">楼盘导购</option>
        <option value="">楼盘只是</option>
        <option value="">楼盘动态</option>

      </select>
      </Col>
    </Row>
     {/* 标题 */}
     <Row style={{marginBottom:'20px'}}>
      <Col span={24}>标题<input type="text" style={{marginLeft:'35px'}}/></Col>
    </Row>
     {/* 缩略图 */}
     <Row style={{marginBottom:'20px'}}>
      <Col span={24} style={{display:'flex'}}>缩略图<Upload
      style={{marginLeft:'30px'}}
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        beforeUpload={beforeUpload}
        onChange={handleChange}
      >
        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
      </Upload>
      </Col>
    </Row>
    {/* 简介 */}
    <Row style={{marginBottom:'20px'}}>
      <Col span={24}>简介
      <div style={{ border: '1px solid #ccc', zIndex: 100}}>
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{ borderBottom: '1px solid #ccc' }}
                />
                <Editor
                    defaultConfig={editorConfig}
                    value={html}
                    onCreated={setEditor}
                    onChange={editor => setHtml(editor.getHtml())}
                    mode="default"
                    style={{ height: '300px', overflowY: 'hidden' }}
                />
            </div>
            <div style={{ marginTop: '15px' }}>
                {html}
            </div>
      </Col>
    </Row>
    </div>
  )
}

const mapStateToProps = (state:any) => ({})



export default connect(mapStateToProps)(dongtai)